<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<uni-header :leftIcon="false" :title="'个人信息'"></uni-header>
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<uni-file-picker limit="1" v-model="avatar" :del-icon="false" disable-preview
						:imageStyles="imageStyles" @select="avatarUpload" file-mediatype="image">选择</uni-file-picker>
					<view v-if="!infoData.userName" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-else @click="handleToInfo" class="user-info">
						<view class="u_title">
							欢迎您：{{ infoData.userName }}
						</view>
					</view>
				</view>
				<view @click="handleToInfo" class="flex align-center">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<view class="mine-actions grid col-3 text-center">
				<view class="action-item">
					<view class="number">{{circleNum}}</view>
					<text class="text">我加入的圈子</text>
				</view>
				<view class="action-item">
					<view class="number">{{themeNum}}</view>
					<text class="text">我发布的主题</text>
				</view>
				<view class="action-item">
					<view class="number">{{replyNum}}</view>
					<text class="text">我回复的帖子</text>
				</view>
			</view>
			<view class="menu-content grid col-3 text-center">
				<view class="action-item" v-for="item in menuContent" @click="handleToUrl(item)">
					<view class="iconfont icon" :class="item.icon" style="position: relative;">
						<view class="" v-if="item.name === '我的消息' && $store.state.user.infoData.message_num>0"
							style="background-color: red; width: 8px; height: 8px; border-radius: 50%; position: absolute; top: 10px; right: 10px;">
						</view>
					</view>
					<view class="text">{{item.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		statisticsInfo
	} from '@/api/mine'
	import config from '@/config'
	const baseUrl = config.baseUrl
	const imgUrl = config.imgUrl1
	export default {
		data() {
			return {
				infoData: this.$store.state.user.infoData,
				replyNum: "",
				status: "",
				circleNum: "",
				themeNum: "",
				avatar: {},
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				menuContent: [{
						name: "我的笔记",
						url: "/pages/mine/note/note",
						icon: "icon-biji"
					},
					{
						name: "我的活动报告",
						url: "/pages/mine/report/index",
						icon: "icon-baogao1"
					},
					{
						name: "我的教案抽查",
						url: "/pages/mine/TeachPlan/index",
						icon: "icon-beikejiaoan"
					},
					{
						name: "我的听评课",
						url: "/pages/mine/lecture/index",
						icon: "icon-zhanwei_student1"
					},
					{
						name: "我的教研管理",
						url: "/pages/mine/manage/index",
						icon: "icon-pre-hw"
					},
					{
						name: "我的观摩课",
						url: "/pages/mine/seeClass/index",
						icon: "icon-peixunjilu"
					},
					{
						name: "我的收藏",
						url: "/pages/mine/myCollect/index",
						icon: "icon-wodeshoucang"
					},
					{
						name: "评语模板",
						url: "/pages/mine/comment/index",
						icon: "icon-pingjia"
					},
					{
						name: "我的主题",
						url: "/pages/mine/myTopic/index",
						icon: "icon-dengpao"
					},
					// {name:"我分享的主题",url:"/pages/mine/share/index",icon:"icon-ziliao"},
					{
						name: "我的反馈",
						url: "/pages/mine/feedback/index",
						icon: "icon-woyaofankui"
					},
					{
						name: "我的消息",
						url: "/pages/mine/news/index",
						icon: "icon-xinxi"
					},
				]
			}
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		created() {
			this.avatar = {
				"url": imgUrl + this.infoData.imgicon,
				"name": "001.png",
				"extname": "png",
			}
			statisticsInfo({
				userType: 2,
				deviceId: this.$store.state.user.deviceId
			}).then(res => {
				this.themeNum = res.themeNum;
				this.circleNum = res.circleNum;
				this.status = res.status;
				this.replyNum = res.replyNum;
			})
		},
		methods: {
			handleToUrl(data) {
				if (data.url.length != "") {
					this.$tab.navigateTo(data.url)
				} else {
					this.$modal.showToast('模块建设中~')
				}
			},
			//点击上传头像
			avatarUpload(e) {
				uni.uploadFile({
					url: baseUrl + '/member/uploadFile?deviceId=' + this.$store.state.user.deviceId,
					filePath: e.tempFilePaths[0],
					name: 'file',
					formData: {
						uploadImg: e.tempFiles[0].file
					},
					success: (res) => {
						console.log(res)
					}
				});
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			// handleToEditInfo() {
			//   this.$tab.navigateTo('/pages/mine/note/note')
			// },
			// handleToSetting() {
			//   this.$tab.navigateTo('/pages/mine/lecture/index')
			// },
			// handleToComment(){
			//   this.$tab.navigateTo('/pages/mine/comment/index')
			// },
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			// handleToAvatar() {
			//   this.$tab.navigateTo('/pages/mine/avatar/index')
			// },
			// handleLogout() {
			//   this.$modal.confirm('确定注销并退出系统吗？').then(() => {
			//     this.$store.dispatch('LogOut').then(() => {
			//       this.$tab.reLaunch('/pages/index')
			//     })
			//   })
			// },
			// handleHelp() {
			//   this.$tab.navigateTo('/pages/mine/help/index')
			// },
			// handleAbout() {
			//   this.$tab.navigateTo('/pages/mine/about/index')
			// },
			// handleJiaoLiuQun() {
			//   this.$modal.showToast('QQ群：①133713780、②146013835')
			// },
			// handleBuilding() {
			//   this.$modal.showToast('模块建设中~')
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #3c96f3;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 10px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.number {
						font-size: 28px;
						color: #6699ff;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}

			.menu-content {
				margin: 15px 10px;
				background: #fff;

				.action-item {
					padding: 10px 0;
					border: 1px solid #eee;

					.iconfont {
						font-size: 30px;
						color: #fff;
						padding: 10px;
						background: #3c96f3;
						border-radius: 10px;
					}

					.text {
						margin-top: 10px;
					}
				}
			}
		}
	}
</style>